<template>
	<view class="page">
		<uni-nav-bar :fixed="true" :statusBar="true" left-icon="left" title="养护列表" rightText="+新增" @clickRight="handleAdd" @clickLeft="goback"/>
		<view class="list-wrapper" v-if="list.length>0">
			<navigator class="list-item b-b" v-for="item in list" :key="item.id" :url="'../newsInfo/newsInfo?id='+item.id">
				<view class="flex">
					<view class="flex-item">
						<view class="item-title ellipsis">{{ item.title }}</view>
						<view class="item-tip">
							<text v-if="item.date">{{ item.date }}</text>
						</view>
					</view>
					<block v-if="item.url">
						<image :src="item.url" mode="center" class="img"></image>
					</block>
				</view>
				
			</navigator>
		</view>
		<view class="no-data" v-if="noData && list.length == 0">
			<view class="ux-tips">暂无记录</view>
		</view>
		<block v-else>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</block>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		name: 'AttendanceList',
		components: {
			uniLoadMore
		},
		data() {
			return {
				list: [],

				pageIndex: 1,
				pageTotal: 0,
				pageSize: 4,
				loadStatus: "loading",
				noData: false,
				refresh: false
			};
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.pageIndex = 1
			this.refresh = true;
			this.getList()
		},
		onReachBottom() {
			if (this.pageIndex * this.pageSize >= this.pageTotal) {
				this.noData = true;
				this.loadStatus = 'noMore';
				return;
			}

			this.pageIndex++;
			this.loadStatus = 'loading';
			this.getList()
		},
		methods: {
			goback(){
				uni.navigateBack({
					delta: -1
				});
			},
			handleAdd(){
				uni.navigateTo({
					url: '/pages/attendance/add',
				});
			},
			getList() {
				this.list = [
					{
						id:1,
						title:'内蒙古建盛绿化装饰工程有限公司',
						date:'2022-04-10  17:12:30',
						url:'../../static/ecology/img2.png'
					},
					{
						id:1,
						title:'内蒙古建盛绿化装饰工程有限公司',
						date:'2022-04-10  17:12:30',
						url:'../../static/ecology/img2.png'
					}
				]
				uni.stopPullDownRefresh();
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-wrapper {
		.list-item {

			padding: 30rpx;
			
			.flex {
				width: 100%;
				overflow: hidden;
			}

			.item-title {
				padding: 10rpx 0;
				min-height: 90rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333;
				line-height: 66rpx;
			}

			.img {
				display: block;
				margin-left: 40rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}

			.item-tip {
				.from {
					max-width: 280rpx;
				}
				text {
					display: inline-block;
					margin-right: 40rpx;
					font-size: 24rpx;
					color:#999;
				}
			}
		}
	}
</style>
